<template>
  <div>
    <div class="buttons">
      <el-button size="mini" type="primary" plain @click="addClass()">新增供应商分类</el-button>
      <el-button size="mini" type="primary" plain @click="editClass()">编辑供应商分类</el-button>
      <el-button size="mini" type="primary" plain @click="deleteClass()">删除供应商分类</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button size="mini" type="primary" plain @click="addSupplier()">新增供应商</el-button>
      <el-button size="mini" type="primary" plain @click="editSupplier()">编辑供应商</el-button>
      <el-button size="mini" type="primary" plain @click="deleteSupplier()">删除供应商</el-button>
    </div>
    <div class="top-check">
      <el-form :inline="true" :model="checkForm" size="mini">
        <el-form-item label="供应商编码">
          <el-input v-model="checkForm.code"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="checkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="checkForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="checkForm.concact"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="手机">
          <el-input v-model="checkForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="固话">
          <el-input v-model="checkForm.fixedline"></el-input>
        </el-form-item>
        <el-form-item label="QQ">
          <el-input v-model="checkForm.qq"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="CheckSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="CheckClear">清空查询条件</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="left tabbox">
      <el-table
        border
        :data="classTableApp.list.classlist"
        @row-click="classSelect"
        :stripe="true"
        :header-row-style="{height:'20px'}"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        tooltip-effect="light"
        highlight-current-row
        style="width: 100%;"
        height="680px"
      >
        <el-table-column prop="name" label="供应商分类" width="98"></el-table-column>
        <el-table-column prop="code" label=" 分类编码" width="98"></el-table-column>
        <el-table-column prop="have_num" label="供应商个数" width="98"></el-table-column>
      </el-table>
    </div>
    <div class="right tabbox">
      <el-table
        border
        :data="suppliserTableApp.list.tableData"
        @row-click="selectSuppliser"
        :stripe="true"
        :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
        :row-style="{height:'5px'}"
        :cell-style="{padding:'5px 0'}"
        tooltip-effect="light"
        highlight-current-row
        style="width: 100%;"
        height="680"
      >
        <el-table-column  label="序号" width="50">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column  prop="code" label="供应商编码" width="95"></el-table-column>
        <el-table-column  prop="name" label="供应商名称" width="250"></el-table-column>
        <el-table-column prop="address" label="地址" width="250"></el-table-column>
        <el-table-column prop="concact" label="联系人" width="150"></el-table-column>
        <el-table-column prop="phone" label="手机" width="150"></el-table-column>
        <el-table-column prop="fixedline" label="固话" width="150"></el-table-column>
        <el-table-column prop="qq" label="QQ" width="150"></el-table-column>
        <el-table-column prop="concact2" label="备用联系人" width="95"></el-table-column>
        <el-table-column prop="phone2" label="备用联系人手机" width="150"></el-table-column>
        <el-table-column prop="fixedline2" label="备用联系人固话" width="150"></el-table-column>
      </el-table>
    </div>
    <div class="clear"></div>
    <AddClass
      v-if="dialog.class_add"
      :form="classTableApp.tempRow"
      @dialog-close="dialog.class_add=false"
      @refresh="RefreshClass"
    ></AddClass>
    <EditClass
      v-if="dialog.class_edit"
      :form="classTableApp.tempRow"
      @dialog-close="dialog.class_edit=false"
      @refresh="RefreshClass"
    ></EditClass>
    <DeleteClass
      v-if="dialog.class_delete"
      :form="classTableApp.tempRow"
      @dialog-close="dialog.class_delete=false"
      @refresh="RefreshClass"
    ></DeleteClass>
    <AddSuppliser
      v-if="dialog.supplier_add"
      :form="suppliserTableApp.tempRow"
      @dialog-close="dialog.supplier_add=false"
      @refresh="RefreshSupplier(classTableApp.SelectRow.id)"
    ></AddSuppliser>
    <EditSuppliser
      v-if="dialog.supplier_edit"
      :form="suppliserTableApp.tempRow"
      @dialog-close="dialog.supplier_edit=false"
      @refresh="RefreshSupplier(classTableApp.SelectRow.id)"
    ></EditSuppliser>
    <DeleteSuppliser
      v-if="dialog.supplier_delete"
      :form="suppliserTableApp.tempRow"
      @dialog-close="dialog.supplier_delete=false"
      @refresh="RefreshSupplier(classTableApp.SelectRow.id)"
    ></DeleteSuppliser>

  </div>
</template>

<script>
import AddClass from "./supplier_dialog/classDialog/add";
import EditClass from "./supplier_dialog/classDialog/edit";
import DeleteClass from "./supplier_dialog/classDialog/delete";
import AddSuppliser from "./supplier_dialog/supplierDialog/add";
import EditSuppliser from "./supplier_dialog/supplierDialog/edit";
import DeleteSuppliser from "./supplier_dialog/supplierDialog/delete";
export default {
  components: {
    AddClass,
    EditClass,
    DeleteClass,
    AddSuppliser,
    EditSuppliser,
    DeleteSuppliser
  },
  created() {
    this.RefreshClass();
    this.RefreshSupplier(1);
  },
  methods: {
    newMethod() {},
    RefreshClass() {
      this.$http.get("/supplierClass/list").then(response => {
        this.classTableApp.list.classlist = response.data;
      });
    },
    RefreshTempRow() {
      this.classTableApp.tempRow = JSON.parse(
        JSON.stringify(this.classTableApp.SelectRow)
      );
      this.suppliserTableApp.tempRow = JSON.parse(
        JSON.stringify(this.suppliserTableApp.SelectRow)
      );
    },
    RefreshSupplier(id) {
      this.$http.post("/supplier/somedata", { classid: id }).then(response => {
        this.suppliserTableApp.list.tableData = response.data;
      });
      window.console.log(this.suppliserTableApp.list.classlist);
    },
    classSelect(Row) {
      this.suppliserTableApp.SelectRow={}
      this.classTableApp.SelectRow = JSON.parse(JSON.stringify(Row));
      this.classTableApp.tempRow = JSON.parse(JSON.stringify(Row));
      this.RefreshSupplier(Row.id);
    },
    selectSuppliser(Row) {
      this.suppliserTableApp.SelectRow = JSON.parse(JSON.stringify(Row));
      this.suppliserTableApp.tempRow = JSON.parse(JSON.stringify(Row));
    },

    CheckSelectClass() {
      if (
        this.classTableApp.tempRow.id == null ||
        this.classTableApp.tempRow.id == ""
      ) {
        this.$message.error("请选择一个供应商分类");
        return false;
      }
      return true;
    },
    CheckSelectSupplier() {
      if (
        this.suppliserTableApp.tempRow.id == null ||
        this.suppliserTableApp.tempRow.id == ""
      ) {
        this.$message.error("请选择一个供应商");
        return false;
      }
      return true;
    },
    addClass() {
      this.RefreshTempRow();
      this.dialog.class_add = true;
    },
    editClass() {
      this.RefreshTempRow();
      if (this.CheckSelectClass()) {
        this.dialog.class_edit = true;
      }
    },
    deleteClass() {
      this.RefreshTempRow();
      if (this.CheckSelectClass()) {
        this.dialog.class_delete = true;
      }
    },
    addSupplier() {
      this.RefreshTempRow();
      this.dialog.supplier_add = true;
    },
    editSupplier() {
      this.RefreshTempRow();
      if (this.CheckSelectSupplier()) {
        this.dialog.supplier_edit = true;
      }
    },
    deleteSupplier() {
      this.RefreshTempRow();
      if (this.CheckSelectSupplier()) {
        this.dialog.supplier_delete = true;
      }
    },
    CheckSubmit() {
       this.$http.post("supplier/search",this.checkForm).then(response =>{
        this.suppliserTableApp.list.tableData = response.data
      })
    },
    CheckClear() {
      this.checkForm = {}
    }
  },
  data() {
    return {
      curkey: 1,
      checkForm: {},
      dialog: {
        class_add: false,
        class_edit: false,
        class_delete: false,
        supplier_add: false,
        supplier_edit: false,
        supplier_delete: false
      },
      classTableApp: {
        hackReset: false,
        firstColumn: {
          name: "机构组织名",
          prop: "name",
          width: "300"
        },
        list: {
          classlist: []
        },
        SelectRow: {},
        tempRow: {}
      },
      suppliserTableApp: {
        list: {
          tableData: []
        },
        SelectRow: {},
        tempRow: {} //隔离对象，用于传递
      }
    };
  }
};
</script>

<style>
.right {
  height: 670px;
  width: 1480px;
  float: left;
}
.left {
  height: 670px;
  width: 294px;
  /* background-color: red; */
  float: left;
  clear: right;
  margin-right: 15px;
}
</style>